<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="站点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="siteId">
              <j-dict-select-tag v-model="model.siteId" dict-code="HC_SITE,NAME,ID" placeholder="请选择站点" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="大厦名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressName">
              <a-col :span="18">
                <a-input v-model="model.addressName" placeholder="请输入大厦名"></a-input>
              </a-col>
              <a-col :span="5" :gutter="2" style="margin-left: 10px">
                <a-button @click="showMap">打开地图</a-button>
              </a-col>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="简称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressShortName">
              <a-input v-model="model.addressShortName" placeholder="请输入简称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="longitude">
              <a-input-number v-model="model.longitude" placeholder="请输入经度" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="纬度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="latitude">
              <a-input-number v-model="model.latitude" placeholder="请输入纬度" style="width: 100%" :disabled="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="供应地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyAddressArray">
              <!--              <a-input v-model="model.supplyAddress" placeholder="请输入供应地址"></a-input>-->
              <a-row
                type="flex"
                align="top"
                style="margin-bottom: 5px"
                v-for="(item, index) in model.supplyAddressArray"
                :key="index"
              >
                <a-input
                  v-model="item.name"
                  style="width: 300px; margin-right: 10px"
                  @change="inputBlur"
                  placeholder="名称"
                />
                <a-input
                  v-model="item.code"
                  style="width: 100px; margin-right: 10px; margin-bottom: 10px"
                  @change="inputBlur"
                  placeholder="代号"
                />
                <j-image-upload v-model="item.img" :text="'取餐点图片'" :isMultiple="true" @change="inputBlur" />
                <a-button icon="arrow-up" style="margin-left: 5px" @click="orderItem(index, 1)" />
                <a-button icon="arrow-down" style="margin-left: 5px" @click="orderItem(index, -1)" />
                <a-button type="primary" icon="plus" style="margin-left: 5px" @click="addItem(index)" />
                <a-button
                  type="danger"
                  icon="minus"
                  v-if="index > 0"
                  style="margin-left: 5px"
                  @click="delItem(index)"
                />
              </a-row>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="佣金" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commission">-->
          <!--              <a-input-number-->
          <!--                v-model="model.commission"-->
          <!--                :min="0"-->
          <!--                placeholder="请输入地址所属佣金"-->
          <!--                style="width: 100%"-->
          <!--              ></a-input-number>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="骑手姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nameRider">-->
          <!--              &lt;!&ndash;              <a-input v-model="model.nameRider" placeholder="请输入骑手姓名"></a-input>&ndash;&gt;-->
          <!--              <j-dict-select-tag-->
          <!--                  v-model="model.nameRider"-->
          <!--                  dict-code="HC_RIDER,FULL_NAME,ID"-->
          <!--                  placeholder="请选择骑手"-->
          <!--              />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
    <Map ref="maps" @getAddressInfo="getAddressInfo"></Map>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'HcSiteAddressDetailsForm',
  components: {
    Map: () => import('./map.vue'),
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        supplyAddressArray: [{}],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        siteId: [{ required: true, message: '请输入站点ID!' }],
        addressName: [{ required: true, message: '请输入大厦名!' }],
        supplyAddress: [{ required: true, message: '请输入供应地址!' }],
        supplyAddressArray: [
          { required: true, message: '请输入供应地址!' },
          {
            validator: (rule, value, callback) => {
              let filter = this.model.supplyAddressArray.filter((item) => {
                return Boolean(item.name) && Boolean(item.code)
              })

              if (filter == null || filter.length == 0) {
                callback('请输入供应地址')
              }

              callback()
            },
          },
        ],
        nameRider: [{ required: true, message: '请输入骑手姓名!' }],
        longitude: [{ required: true, message: '请输入经度!' }],
        latitude: [{ required: true, message: '请输入纬度!' }],
        commission: [{ required: true, message: '请输入佣金!' }],
      },
      url: {
        add: '/hc/hcSiteAddressDetails/add',
        edit: '/hc/hcSiteAddressDetails/edit',
        queryById: '/hc/hcSiteAddressDetails/queryById',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    orderItem(index, type) {
      if (type == 1 && index == 0) return
      if (type == -1 && index == this.model.supplyAddressArray.length - 1) return
      let obj = this.model.supplyAddressArray[index]
      this.model.supplyAddressArray.splice(index, 1)
      if (type == 1) {
        this.model.supplyAddressArray.splice(index - 1, 0, obj)
      }
      if (type == -1) {
        this.model.supplyAddressArray.splice(index + 1, 0, obj)
      }
      this.$forceUpdate()
    },
    addItem(index) {
      // this.model.supplyAddressArray.push({})
      this.model.supplyAddressArray.splice(index + 1, 0, {})

      this.$forceUpdate()
    },
    inputBlur() {
      this.$forceUpdate()
    },
    delItem(index) {
      this.model.supplyAddressArray.splice(index, 1)
      this.$forceUpdate()
    },
    //展示地图
    showMap() {
      this.$refs.maps.show(this.model.addressName)
    },
    //获取地址
    getAddressInfo(value) {
      console.log('model', this.model)
      this.$set(this.model, 'addressName', value.addressName)
      this.$set(this.model, 'longitude', value.longitude)
      this.$set(this.model, 'latitude', value.latitude)
    },

    add(siteId) {
      // this.edit(this.modelDefault);
      // console.log('add显示', siteId)
      // this.model.siteId = siteId
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)

      if (this.model.supplyAddress) {
        try {
          this.model.supplyAddressArray = JSON.parse(this.model.supplyAddress)

          if (this.model.supplyAddressArray.length == 0) {
            this.model.supplyAddressArray.push({})
          }
        } catch (e) {
          this.model.supplyAddressArray = [{}]
        }
      } else {
        this.model.supplyAddressArray = [{}]
      }

      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }

          let filter = this.model.supplyAddressArray.filter((item) => {
            return Boolean(item.name) && Boolean(item.code)
          })

          if (filter && filter.length > 0) {
            this.model.supplyAddress = JSON.stringify(filter)
          } else {
            this.$message.warning('请输入供应地址')
            that.confirmLoading = false
            return false
          }

          const newArr = this.model.supplyAddressArray.map((item) => item.code)
          const arrSet = new Set(newArr)

          if (arrSet.size != this.model.supplyAddressArray.length) {
            this.$message.warning('供应地址里的代号不能重复')
            that.confirmLoading = false
            return false
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>